﻿{% load static %}

<!DOCTYPE html>
<html>

<head>
    <title>APP下载</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" type="image/png" href="https://res.yyzb.com/haibao_icon_xs.png">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .wrapper {
            position: relative;
            min-height: 10rem;
            height: 100%;
            overflow: hidden;
        }

        .logo {
            width: 4.54rem;
            height: 2.61rem;
            background: url(https://res.yyzb.com/h5/download/logo.png);
            background-size: 100% auto;
            position: absolute;
            top: 22%;
            left: 50%;
            margin-left: -2.27rem;
            z-index: 1000;
        }

        .btn {
            width: 5.08rem;
            height: .94rem;
            border-radius: .47rem;
            position: absolute;
            z-index: 1000;
            display: block;
            text-decoration: none;
            line-height: .94rem;
            color: #030963;
            font-size: .46rem;
            text-align: center;
            background: #fff;
            top: 72%;
            left: 50%;
            margin-left: -2.54rem;
        }

        .bg {
            background-size: cover;
            background-position: center center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .bg1 {
            background-image: url(https://res.yyzb.com/h5/download/pic01.jpg);
        }

        .bg2 {
            background-image: url(https://res.yyzb.com/h5/download/pic02.jpg);
        }

        .z100 {
            z-index: 100;
        }

        .scaleAni {
            animation: scaleAni 5s linear;
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            opacity: 0;
        }

        @keyframes scaleAni {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
            }

            100% {
                transform: scale(1.2);
                opacity: 0;
            }
        }

        @-webkit-keyframes scaleAni {
            0% {
                -webkit-transform: scale(1);
                opacity: 1;
            }

            50% {
                -webkit-transform: scale(1.1);
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(1.2);
                opacity: 0;
            }
        }

        /* .opaAni {
            animation: opaAni 3.5s ease-in-out;
            opacity: 0;
        }

        @keyframes opaAni {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @-webkit-keyframes opaAni {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        } */
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="bg1" class="bg bg1 z100"></div>
        <div id="bg2" class="bg bg2"></div>
        <div class="logo"></div>
        <a id="download_btn" href="" class="btn">立即下载</a>
    </div>
    <script src="{% static 'js/download_app.js' %}"></script>
    <script>
        function setMobile() {
            var win = window,
                resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
                doc = document,
                recalc = function () {
                    var deviceWidth = doc.documentElement.clientWidth;
                    if (deviceWidth > 800) deviceWidth = 800;
                    doc.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
                };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }
        setMobile();
        var ele = [document.getElementById('bg1'), document.getElementById('bg2')],
            idx = 0;
        var setAni = function () {
            var _this = ele[idx];
            idx = idx ? 0 : 1;
            var another = ele[idx];
            _this.classList.add('scaleAni');
            setTimeout(() => {
                another.classList.remove('scaleAni', 'z100');
                _this.classList.add('z100');
            }, 1500);
            setTimeout(() => {
                // _this.classList.add('opaAni');
                setAni();
            }, 3500);
            // setTimeout(() => {
            //     setAni();
            // }, 7000);
        };
        setAni();
        var config = {
            ios_mobile_provision: '{{ config.ios_mobile_provision }}',
            ios_download_url: '{{ config.ios_download_url }}',
            android_download_url: '{{ config.android_download_url }}',
        };
        appManager.init(config);
    </script>
</body>

</html>